سئو- استفاده از همه شگردها برای بالابردن ترافیک سایت

قصد دارم از css sprite برایتان بنویسم می تونید دموی آماده شده برای این کار را از لینک زیر ببینید (آدرس گفته شده ایندکس نداردتا به راحتی بتوانید فایلهای آن را ببینید)

http://google724.com/css_sprites_demo
چرا که مطمئنم الان دیگر درک سئوی کاربران این وبلاگ به استفاده از آن و حتی بالاتر رسیده است
اگر بخواهم css sprite را خیلی واضح و خودمانی تعریف کنم میشود چپوندن همه عکسها در یک عکس یا رسمی ترش:  قرار دادن تصاویر متعدد در یک تصویر منفرد
خوب فایده اش را هم بگویم وقتی یکبار این ترکیب عکس ها لود شود در همه جا که اجزای آن بکار رفته قابل استفاده  است
بدون آنکه نیاز به بارگذاری مجدد داشته باشد
مهمترین حسن این کار هم این است که تعداد درخواستها به سرور کم میشودو هرچه سایت بزرگتر باشه استفاده از این شیوه ضرورت بیشتری پیدا می کند

چند نکته مهم:

اگر قصد دارید فایل بک گراند را در فایل css sprit قرار دهید باید این اصل را به یاد داشته باشید که در صورتیکه قصد دارید عکس پشت زمینه شما دارای تکرار باشد  حالات زیر را داریم

1- تکرار در تمام جهات: در این حالت اصلا منطقی نیست که از فایل CSS SPRIT استفاده نمایید چرا که نمی توان قطعه ای از یک تصویر را بصورت تکرار در پشت زمین قرار داد

2- تکرار در یک جهت باشد مثلا repeat-y یا repeat-x  که در این حالت بسته به جهت تکرار تنها مجاز به استفاده از sprit ای هستید که در یک جه (منطبق با جهت شما چیده شده باشند)

یعنی یا افقی یا عمودی یا همه زیر هم یا همه پهلوی هم

[1][2]\      [3][%][%][%][%][%][%][%][%]
[%][%] |     [4][%][%][%][%][%][%][%][%]
[%][%] |     \_________________________/
[%][%] |              افقی (horizontal)
[%][%] |— به تعداد مورد نیاز در جهت y یا (vertical)
[%][%] |
[%][%] |
[%][%]/

یعنی

You can only use sprites for images that repeat in the same direction. This is because there is no way to limit the repeatable area through CSS, so if you"re repeating horizontally there can"t be any other images placed along the horizontal axis of the section you want repeated or they will be included in the repeat. So, pages that have backgrounds repeated in multiple directions will be able to be reduced to no less than 2 HTTP requests for background images.

توصیه میشود سه تا فایل اسپریت داشته باشید

یکی برای جهت افقی یا sprite_repeatx.png و یکی برای جهت عمودی یا sprite_repeaty.png و یک فایل عادی اسپریت یعنی sprite.png

مثلا برای sprite_repeatx.png یا شما می توانید 3 تا عکس بک گراند تکرار شمنده در امتداد X بسازید

اگر اندازه های چینش عکس ها در یک عکس را بصورت قانونمند پیاده کنید کارتان راحت خواهد بود مثلا برای مقیاس 100 داریمbackground-position:0 0;, background-position:0 -100px;, background-position:0 -200px;,

 

استفاده از css sprit را حتی گوگل هم  انجام داده اگر در فایرفاکس روی آیکون گوگل کلیک راست کرده و گزینه  view image را بزنید با تصویر زیر مواجه می شوید

 

استفاده از این شیوه هوش ذکاوت خاصی نمی خواهد من توضیحات کاملترش را بعد خواهم داد فقط همینقدر بگویم که

در این روش تصاویری که تکرار میشوند مثل بک گراندها و... باید با ترفند خاص خودش بکار رود که بعدا به آن هم خواهیم پرداخت

در انتها توصیه می کنیم برای شروع کار عکس ها را با فاصله زیاد از هم بچینید تا خطا کمتر شود بعد که مسلط شدید می توانید فاصله را کمتر کنیدمثلا بصورت زیر

 

دمو:http://google724.com/css_sprites_demo